<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 500">
            <defs>
                <linearGradient id="fade">
                    <stop offset="0%" stop-color="#008"></stop>
                    <stop offset="100%" stop-color="#ccf"></stop>
                </linearGradient>
            </defs>
            <rect x="100" y="100" width="200" height="200" stroke="black" stroke-width="10" fill="url(#fade)"></rect>
        </svg>
    </div>
    
    <div>
        this is a red squara:<svg width="10" height="10"><rect x="0" y="0" width="10" height="10" fill="red"/></svg>
    </div>
</body>
</html>